feat: implement movie details page and optimize components

client/app/components/ActionButtons/ActionButtons.module.css

@@ -0,0 +1,84 @@
+/**
+ * Action Buttons Styles
+ * 
+ * CSS Module for the action buttons component.
+ * Provides consistent styling with the rest of the application.
+ */
+
+.actionButtons {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  justify-content: flex-start;
+}
+
+.button {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 120px;
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.editButton {
+  background: #0070f3;
+  color: white;
+  border: 1px solid #0070f3;
+}
+
+.editButton:hover:not(:disabled) {
+  background: #0051cc;
+  border-color: #0051cc;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 112, 243, 0.3);
+}
+
+.deleteButton {
+  background: #dc2626;
+  color: white;
+  border: 1px solid #dc2626;
+}
+
+.deleteButton:hover:not(:disabled) {
+  background: #b91c1c;
+  border-color: #b91c1c;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .actionButtons {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .button {
+    width: 100%;
+    padding: 0.875rem 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .actionButtons {
+    gap: 0.5rem;
+  }
+
+  .button {
+    padding: 0.75rem 1rem;
+    font-size: 0.9rem;
+  }
+}

client/app/components/ActionButtons/ActionButtons.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+/**
+ * Action Buttons Component
+ * 
+ * Provides Edit and Delete actions for movie details page
+ */
+
+import styles from './ActionButtons.module.css';
+
+interface ActionButtonsProps {
+  onEdit: () => void;
+  onDelete: () => void;
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export default function ActionButtons({ 
+  onEdit, 
+  onDelete, 
+  isLoading = false, 
+  disabled = false 
+}: ActionButtonsProps) {
+  return (
+    <div className={styles.actionButtons}>
+      <button
+        onClick={onEdit}
+        disabled={disabled || isLoading}
+        className={`${styles.button} ${styles.editButton}`}
+        type="button"
+      >
+        {isLoading ? 'Loading...' : 'Edit Movie'}
+      </button>
+
+      <button
+        onClick={onDelete}
+        disabled={disabled || isLoading}
+        className={`${styles.button} ${styles.deleteButton}`}
+        type="button"
+      >
+        {isLoading ? 'Loading...' : 'Delete Movie'}
+      </button>
+    </div>
+  );
+}

client/app/components/ActionButtons/index.ts

@@ -0,0 +1 @@
+export { default } from './ActionButtons';